<template>
  <div>
    <div class="personalHeader">
      <div class="personalTop"></div>
      <div class="personalBottom">
        <div class="headerBox">
          <img class="headerImg" :src="head_portrait | imgF" alt />
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jifen.zhportinfo.com/api/v1/userAvatar"
            :data="{ _id: this.$store.getters.userInfo._id }"
            :headers="headers"
            :on-change="handleChange"
            :show-file-list="false"
            :limit="1"
          >
            <el-button type="text">编辑头像</el-button>
          </el-upload>
        </div>
        <div class="headerDeatil">
          <div class="headerName">
            {{ userInfo.name }}
            <i @click="edit()" class="el-icon-edit-outline"></i>
          </div>
          <div class="headerIntroduce">
            <div class="headerInput">
              <div class="headerInputName">性别</div>
              <!-- <input
                class="headerInputs"
                placeholder="未知"
                suffix-icon="el-icon-date"
                v-model="input1"
              />-->
              <div class="headerInputs">{{ userInfo.Gender | dataF }}</div>
              <!-- <i class="el-icon-edit-outline" @click="edit(1)"></i> -->
            </div>
            <div class="headerInput">
              <div class="headerInputName">手机号码</div>
              <!-- <input
                class="headerInputs"
                placeholder="未知"
                suffix-icon="el-icon-date"
                v-model="input1"
              />-->
              <div class="headerInputs">{{ userInfo.phone | dataF }}</div>
              <!-- <i class="el-icon-edit-outline"></i> -->
            </div>
            <div class="headerInput">
              <div class="headerInputName">自我介绍</div>
              <!-- <input
                class="headerInputs"
                placeholder="未填写"
                suffix-icon="el-icon-date"
                v-model="input1"
              />-->
              <div class="headerInputsS">{{ userInfo.autograph }}</div>

              <!-- <i class="el-icon-edit-outline" @click="edit(2)"></i> -->
            </div>

            <div class="headerInput">
              <div class="headerInputName">所在部门</div>
              <div class="headerInputs">
                {{ userInfo.department | department }}
              </div>

              <!-- <i class="el-icon-edit-outline"></i> -->
            </div>

            <div class="headerInput">
              <div class="headerInputName">个人认证</div>
              <!-- <input
                class="headerInputs"
                placeholder="未知"
                suffix-icon="el-icon-date"
                v-model="input1"
              />-->
              <div class="headerInputs">{{ userInfo.audit | auditF }}</div>
              <!-- <i class="el-icon-edit-outline"></i> -->
            </div>
          </div>
        </div>
        <div class="editBtn">
          <el-button type="text" class="editBtns" @click="back()"
            >返回我的主页</el-button
          >
        </div>
      </div>
    </div>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogFormVisible"
      style="min-width: 1000px"
    >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            style="width: 220px"
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select
            style="width: 220px"
            v-model="form.Gender"
            placeholder="请选择性别"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-select
            style="width: 220px"
            v-model="form.department._id"
            placeholder="请选择部门"
          >
            <el-option
              v-for="item in departmentlabel"
              :key="item._id"
              :label="item.title"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="自我介绍" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="form.autograph"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogFormVisible = false), updateInfo()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { defaultAvatarURL } from "../../utils/global";

import { put_user_login } from "../../api/user_login";
import { get_departmentlabel } from "../../api/departmentlabel";

export default {
  name: "EditPersonalInformation",

  data() {
    return {
      headers: { authorization: "Bearer " + this.$store.getters.token },
      work: 0,
      userInfo: {},
      dialogFormVisible: false,
      departmentlabel: [],
      head_portrait: "",
      form: {
        name: "",
        Gender: "男",
        autograph: "",
      },
      formLabelWidth: "80px",
    };
  },
  filters: {
    dataF(val) {
      if (val) {
        return val;
      } else {
        return "未知";
      }
    },
    department(val) {
      if (val.title) {
        return val.title;
      } else {
        return "未知";
      }
    },
    imgF(val) {
      return defaultAvatarURL + val;
    },
    auditF(val) {
      if (val) {
        return "已认证";
      } else {
        return "未认证";
      }
    },
  },
  async created() {
    var departmentlabel = await get_departmentlabel({ query: {} });
    this.departmentlabel = departmentlabel.data;
    console.log(this.departmentlabel);
    this.userInfo = this.$store.getters.userInfo;
    console.log(this.userInfo);
    this.form = JSON.parse(JSON.stringify(this.userInfo));
    this.head_portrait = this.userInfo.head_portrait;
  },
  components: {},
  methods: {
    edit() {
      this.dialogFormVisible = true;
    },
    back() {
      this.$router.go(-1); //返回上一层
    },

    handleChange() {
      this.$router.go(0);
    },
    async updateInfo() {
      console.log(this.form);
      var data = await put_user_login({
        query: { _id: this.userInfo._id },
        update: {
          $set: this.form,
        },
      });
      console.log(data);
      this.$message({
        showClose: true,
        message: "更改成功",
        type: "success",
      });
      this.$router.go(0);
    },
  },
};
</script>

<style lang="scss" scoped>
//头部
.personalHeader {
  min-height: 800px;
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  .personalTop {
    height: 140px;
    background-color: #1d2f70;
  }
  .personalBottom {
    position: relative;
    display: flex;
    justify-content: space-around;
    height: 600px;
    .headerBox {
      height: 250px;
      display: flex;
      flex-direction: column;
      position: absolute;
      align-items: center;
      top: -80px;
      left: 80px;
      .headerImg {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        border: 3px solid #ffffff;
        background-color: #cec7c7;
      }
    }

    .headerDeatil {
      width: 800px;
      height: 550px;
      margin: 0 0 0 300px;
      .headerName {
        font-size: 20px;
        font-weight: 550;
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .headerPosition {
        font-size: 14px;
        color: #a6a6a6;
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .headerIntroduce {
        .headerInput {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          line-height: 80px;
          min-height: 90px;
          border-bottom: 1px #dedede solid;
          .headerInputName {
            font-size: 16px;
            font-weight: 550;
          }
          .headerInputs {
            margin: 0 0 0 30px;
            font-size: 16px;
            color: #919baf;
            width: auto;
            outline-color: invert;
            outline-style: none;
            outline-width: 0px;
            border: none;
            border-style: none;
            text-shadow: none;
            -webkit-appearance: none;
            -webkit-user-select: text;
            outline-color: transparent;
            box-shadow: none;
          }
          .headerInputsS {
            width: 600px;
            height: auto;
            margin: 0 0 0 30px;
            line-height: 20px;
          }
        }
      }
    }
    .editBtn {
      width: 200px;
      height: 160px;
      display: flex;
      .editBtns {
        margin: 20px 0;
        height: 48px;
        color: #919baf;
        font-size: 16px;
      }
    }
  }
}
</style>
